import { Breadcrumb } from 'antd';
import type { FC, ReactNode } from 'react';
import type { BreadcrumbItemProps as AntBreadcrumbItemProps } from 'antd/es/breadcrumb/Breadcrumb';
import classNames from 'classnames';
import './style.less';

export interface BreadcrumbItemProps extends AntBreadcrumbItemProps {
  /** 面包屑项的内容 */
  title?: ReactNode;
  /** 面包屑项的链接 */
  href?: string;
  /** 是否禁用 */
  disabled?: boolean;
  /** 点击事件 */
  onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLSpanElement>) => void;
  /** 自定义图标 */
  icon?: ReactNode;
  /** 自定义类名 */
  className?: string;
  /** 自定义样式 */
  style?: React.CSSProperties;
}

const BreadcrumbItem: FC<BreadcrumbItemProps> = ({
  title,
  href,
  disabled,
  onClick,
  icon,
  className,
  style,
  ...restProps
}) => {
  const classes = classNames('xwd-breadcrumb-item', className, {
    'xwd-breadcrumb-item-disabled': disabled,
  });

  const content = (
    <>
      {icon && <span className="xwd-breadcrumb-item-icon">{icon}</span>}
      <span className="xwd-breadcrumb-item-text">{title}</span>
    </>
  );

  const itemContent = href && !disabled ? (
    <a href={href} onClick={onClick} className="xwd-breadcrumb-item-link">
      {content}
    </a>
  ) : (
    <span className="xwd-breadcrumb-item-text" onClick={disabled ? undefined : onClick}>
      {content}
    </span>
  );

  return (
    <Breadcrumb.Item className={classes} style={style} {...restProps}>
      {itemContent}
    </Breadcrumb.Item>
  );
};

export default BreadcrumbItem;
